<template>
    <view class="w-[100%] rounded-[8rpx] h-[100%] border-[2rpx] border-solid border-[#DCDCDC]" :style="{
         padding: size + 'rpx',
    }">
        <view class="h-[100%] rounded-[4rpx]" :style="{
            width: `${value}%`,
           
        }" :class="{
            'bg_20': value <= 20,
            'bg_40': value > 20 && value <= 40,
            'bg_100': value > 40
        }"> 
 
        </view>
    </view>
</template>
<script setup>
const props = defineProps({
    value: {
        type: Number,
        default: 100
    },
    size: {
        type: [String, Number],
        default:50
    },
})
</script>
<style lang="scss" scoped>
.bg_20 {
    background: linear-gradient(270deg, #D07979 0%, #B94D4D 27%, #FACFCF 67%, #B94D4D 97%);
}
.bg_40 {
    background: linear-gradient(270deg, #D0D079 0%, #B9B94D 27%, #FACF81 67%, #B9B94D 97%);
}
.bg_100 {
    background: linear-gradient(270deg, #81D079 0%, #56B94D 27%, #D3FACF 67%, #56B94D 97%);
}
</style>